import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';

<Meta
  title="Components/Badge"
  component="bl-badge"
  argTypes={{
    icon: {
        control: 'text'
    },
    size: {
        options: ['large', 'medium', 'small'],
        control: {type: 'select'}
    }
  }}
/>

export const BadgeTemplate = (args) => html`<bl-badge
icon="${ifDefined(args.icon)}"
size=${ifDefined(args.size)}
style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
>${unsafeHTML(args.content)}</bl-badge>`

export const VariantTemplate = (args) => html`
${BadgeTemplate({ content:'In Progress', styles: { '--bl-badge-bg-color' : 'rgb(254, 242, 232)', '--bl-badge-color': 'rgb(242, 122, 26)' },...args})}
${BadgeTemplate({ content:'Approved', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-contrast)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
${BadgeTemplate({ content:'Warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-contrast)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
${BadgeTemplate({ content:'Denied', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-contrast)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
${BadgeTemplate({ content:'Neutral', styles: { '--bl-badge-bg-color' : 'var(--bl-color-neutral-lightest)', '--bl-badge-color': 'var(--bl-color-neutral-darker)' },...args})}
${BadgeTemplate({ content:'Offer', styles: { '--bl-badge-bg-color' : '#eef4ff', '--bl-badge-color': '#5794ff' },...args})}
${BadgeTemplate({ content:'Winner', styles: { '--bl-badge-bg-color' : '#f4edff', '--bl-badge-color': '#8c4eff' },...args})}
`;

export const WithIconTemplate = (args) => html`
${BadgeTemplate({ content:'In Progress', icon: 'clock', styles: { '--bl-badge-bg-color' : 'var(--bl-color-primary-contrast)', '--bl-badge-color': 'var(--bl-color-primary)' },...args})}
${BadgeTemplate({ content:'Approved', icon: 'check_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-success-contrast)', '--bl-badge-color': 'var(--bl-color-success)' },...args})}
${BadgeTemplate({ content:'Warning', icon: 'warning', styles: { '--bl-badge-bg-color' : 'var(--bl-color-warning-contrast)', '--bl-badge-color': 'var(--bl-color-warning)' },...args})}
${BadgeTemplate({ content:'Denied', icon: 'close_fill', styles: { '--bl-badge-bg-color' : 'var(--bl-color-danger-contrast)', '--bl-badge-color': 'var(--bl-color-danger)' },...args})}
${BadgeTemplate({ content:'Neutral', icon: 'alert', styles: { '--bl-badge-bg-color' : 'var(--bl-color-neutral-lightest)', '--bl-badge-color': 'var(--bl-color-neutral-darker)' },...args})}
${BadgeTemplate({ content:'Offer', icon: 'offers', styles: { '--bl-badge-bg-color' : '#eef4ff', '--bl-badge-color': '#5794ff' },...args})}
${BadgeTemplate({ content:'Winner', icon: 'award', styles: { '--bl-badge-bg-color' : '#f4edff', '--bl-badge-color': '#8c4eff' },...args})}
`;

export const SizeTemplate = (args) => html`
${BadgeTemplate({ content:'In Progress', size:'small', ...args })}
${BadgeTemplate({ content:'In Progress', size:'medium', ...args })}
${BadgeTemplate({ content:'In Progress', size:'large', ...args })}
`;


# Badge

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/130)</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3610)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Badge component can be used for highlighting a status or labeling an item.

<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>

## Badge Variants

There are no specific variants for the badge but we suggest using our color palette for badge colors. If you need else colors you can change color by using `--bl-badge-bg-color` and `--bl-badge-color` variables.
You dont have to give style parameter you can change color by giving css class like this:


`.my-badge {
    --bl-badge-bg-color: red;
    --bl-badge-color: black;
}`

You can use the color model like this ways;

* `rgb`
* `rgba`
* `hex`
* `variables`

Default background color is `--bl-color-primary-contrast` and default color is `--bl-color-primary`.

<Canvas>
<Story name="Variants">
    {VariantTemplate.bind({})}
  </Story>
</Canvas>

## Icon Badges
To boost UX, you might want to add icons to your badge.Our icons are defined to be left of the default slot.
To be able to use icon with badge, you should give the name of icon to `icon` attribute.

And you can only add icon for `large` or `medium` badge.

<Canvas isColumn>
  <Story name='Badge With Icons'>
    {WithIconTemplate.bind({})}
  </Story>
  <Story name='Small Badge With Icon' args={{ icon: 'info', size: 'small', content: 'Show Info'}}>
    {BadgeTemplate.bind({})}
  </Story>
  <Story name='Large Badge With Icon' args={{ icon: 'info', size: 'large', content: 'Show Info'}}>
    {BadgeTemplate.bind({})}
  </Story>
</Canvas>


## Sizing Badges

We have 3 sizes of badges: `large`, `medium`, `small`. Default size is `medium`.

<Canvas>
    <Story name='Badge With Sizes'>
        {SizeTemplate.bind({})}
    </Story>
</Canvas>

## RTL Support

The badge component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 16px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-badge icon="profile">User Status</bl-badge>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-badge icon="profile">حالة المستخدم</bl-badge>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Badge RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .flex-container {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="flex-container">
      <!-- LTR Example -->
      <div>
        <h3>LTR Badge</h3>
        <bl-badge icon="profile">User Status</bl-badge>
      </div>

      <!-- RTL Example -->
      <div dir="rtl">
        <h3>RTL Badge</h3>
        <bl-badge icon="profile">حالة المستخدم</bl-badge>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating a badge programmatically
    const createBadge = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const badge = document.createElement('bl-badge');
      badge.icon = 'profile';
      badge.textContent = isRTL ? 'حالة المستخدم' : 'User Status';

      container.appendChild(badge);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-badge" />


